<template>
	<view class="content">
		<view class="userInfo_top">
			<image src="../../static/uni.png"></image>
			<view class="userInfo">
				<view class="username">
					<text>{{user.name}}</text>
				</view>
				<view class="phone">
					<text style="color: #8a8a8a;">
						{{user.phone}}
					</text>
				</view>
				<view class="note phone">
					<text v-if="!user.note">未设置签名~</text>
					<text style="color: #8a8a8a;">
						{{user.note}}
					</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

				user: {
					name: 144,
					phone: 135245854,
					note: 'sfd'
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: linear-gradient(to bottom, #c0c3d0, #fff);

		.userInfo_top {
			display: flex;
			align-items: center;
			margin-top: 107rpx;
			width: 100%;
			padding: 40rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 16rpx;
			}

			.userInfo {
				margin-left: 20rpx;
				display: flex;
				background-color: #52d076;
				flex: 1;
				flex-direction: column;
				height: 150rpx;
				justify-content: space-between;

				.username {
					font-size: 40rpx;
					font-weight: bold;
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				.phone {
					display: flex;
					align-items: center;
				}

				.note {
					color: #8a8a8a;
				}
			}
		}
	}
</style>